<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>24_定位-特殊情况2-定位元素的宽度-relative</title>
        <style>
            #outer {
                width: 800px;
                height: 200px;
                background-color: #ccc;
            }

            #inner {
                /* 不会根据父元素的内容计算，根据本身内容计算，类似行内块 */
                position: absolute;
                background-color: green;
                /* 内边距和边框 不会挤压内容 */
                border: 5px solid red;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
                炸雷
            </div>
        </div>
    </body>
</html>